<template>
  <div class="app-container">
    <!-- Tab页签 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="待审批" name="pending" lazy>
        <PendingApproval ref="pendingApprovalRef" :currentTab="activeTab" @approve="handleApprove" @transfer="handleTransfer" />
      </el-tab-pane>
      <el-tab-pane label="已通过" name="approved" lazy>
        <ApprovedList :currentTab="activeTab" @view-detail="handleViewDetail" @view-param="openParamDialog" />
      </el-tab-pane>
      <el-tab-pane label="已驳回" name="rejected" lazy>
        <RejectedList :currentTab="activeTab" @view-detail="handleViewDetail" @view-param="openParamDialog" />
      </el-tab-pane>
    </el-tabs>

    <!-- 审批/转交弹窗 -->
    <ApprovalDialog v-model:visible="approvalDialogVisible" :approval-data="currentApprovalData" :mode="dialogMode" @success="handleApprovalSuccess" @view-info="openInfoDialog" @view-param="openParamDialog" />

    <!-- 查看详情弹窗（已通过/已驳回/待审批查看详情复用） -->
    <DetailDialog v-model:visible="detailDialogVisible" :detail-data="currentDetailData" @view-info="openInfoDialog" @view-param="openParamDialog" />

    <!-- 统一的二级弹窗：查看信息 & 查看参数 -->
    <InfoParamDialog v-model:infoVisible="infoDialogVisible" v-model:paramVisible="paramDialogVisible" :data-source="secondaryData" :param-active-tab="paramActiveTab" />
  </div>
</template>

<script setup name="approvalCenter">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import PendingApproval from './components/PendingApproval.vue'
import ApprovedList from './components/ApprovedList.vue'
import RejectedList from './components/RejectedList.vue'
import ApprovalDialog from './components/ApprovalDialog.vue'
import InfoParamDialog from './components/InfoParamDialog.vue'
import DetailDialog from './components/DetailDialog.vue'
import {
  getApprovalDetail,
} from '@/api/personCenter'
// 当前激活的tab
const activeTab = ref('pending')

// 组件引用
const pendingApprovalRef = ref(null)

// 审批弹窗
const approvalDialogVisible = ref(false)
const currentApprovalData = ref({})
const dialogMode = ref('approve') // 'approve' | 'transfer'

// 详情弹窗
const detailDialogVisible = ref(false)
const currentDetailData = ref(null)

// 二级弹窗统一管理
const infoDialogVisible = ref(false)
const paramDialogVisible = ref(false)
const paramActiveTab = ref('tech')
const secondaryData = ref(null)

// Tab切换
const handleTabClick = (tab) => {
  activeTab.value = tab.name
}

// 处理审批
const handleApprove = (data) => {
  // 从审批详情查询审批详情
  getApprovalDetail(data?.requestId).then(res => {
    if (res.code === 200) {
      currentApprovalData.value = { ...res.data }
      dialogMode.value = 'approve'
      approvalDialogVisible.value = true
    } else {
      ElMessage.error('获取审批详情失败')
    }
  }).catch(error => {
    console.error('获取审批详情出错:', error)
    ElMessage.error('获取审批详情出错')
  })
}

// 处理转交
const handleTransfer = (data) => {
  // 从审批详情查询审批详情
  getApprovalDetail(data?.requestId).then(res => {
    if (res.code === 200) {
      currentApprovalData.value = { ...res.data }
      dialogMode.value = 'transfer'
      approvalDialogVisible.value = true
    } else {
      ElMessage.error('获取审批详情失败')
    }
  }).catch(error => {
    console.error('获取审批详情出错:', error)
    ElMessage.error('获取审批详情出错')
  })
}

// 处理查看详情（打开一级详情弹窗）
const handleViewDetail = (data) => {
  getApprovalDetail(data?.requestId).then(res => {
    if (res.code === 200) {
      currentDetailData.value = { ...res.data }
      detailDialogVisible.value = true
    } else {
      ElMessage.error('获取审批详情失败')
    }
  }).catch(error => {
    console.error('获取审批详情出错:', error)
    ElMessage.error('获取审批详情出错')
  })
}

// 从审批弹窗打开二级弹窗
const openInfoDialog = (data) => {
  if (data) {
    secondaryData.value = { ...data }
    infoDialogVisible.value = true
  }
}

const openParamDialog = (data) => {
  if (data) {
    secondaryData.value = { ...data }
    paramActiveTab.value = 'tech'
    paramDialogVisible.value = true
  }
}

// 审批成功回调
const handleApprovalSuccess = () => {
  // 先重置数据，再关闭弹窗，确保下次打开是干净的状态
  currentApprovalData.value = {}
  approvalDialogVisible.value = false
  dialogMode.value = 'approve' // 重置为默认模式
  // 如果当前在待审批tab，刷新待审批列表
  if (activeTab.value === 'pending' && pendingApprovalRef.value) {
    // 调用子组件的getPendingList方法刷新数据
    pendingApprovalRef.value.getPendingList()
    ElMessage.success('待审批列表已刷新')
  }
}
</script>